<template>
    <section class="leave-vacation" :class='{"leave-vacation-single":!sickData.visible}'>
        
      <div class="year">
        
        <div class="img">
          <img src="/static/images/year.svg">
          <ul>
            <li><h1>年假</h1></li>
            <li><a class="check" @click.stop='showHelp("year")'>查看年假规则说明</a></li>            
          </ul>
          <el-dialog
              :visible.sync="dialogVisible"
              :title='dialogTitle' 
              top='30vh'
            >
             <p style="padding:0 20px 10px 20px;font-size:16px;line-height:28px">
                {{dialogMessage}}
             </p>
              <div class="dialog-footer" style='text-align:right'>
                <el-button @click.stop="dialogVisible = false" type="primary">确 定</el-button>
              </div>

            </el-dialog>
        </div>
        <div class="year-detail">

          <ul>
            <li v-for='(k,i) in yearData' v-if='k.visible' :key='i'>
              <p class="first"><span>{{k.years}}{{k.leave_type}}</span> <span>有效期{{k.end_dt}}</span></p>
              <p class="second"><span>共{{k.sum_days}}天</span> <span>已休{{k.rest_days}}天</span><span>剩余{{k.surplus}}天</span></p>
               <div class="range">
                <span v-if='parseFloat(k.sum_days) > 0' :style='"width:"+(100-(parseFloat(k.surplus)/parseFloat(k.sum_days))*100)+"%"'></span>
                <span v-else style='width:100%'></span>
              </div>
            </li>
          </ul>

        </div>
      </div>


      <div class="sick" v-if='sickData.visible' >
        <div class="img">
          <img src="/static/images/sick.svg">
          <ul>
            <li><h1>病假</h1></li>
            <li><a class="check" @click.stop='showHelp("sick")'>查看病假规则说明</a></li>            
          </ul>
        </div>
        <div class="sick-detail">
          <ul>
            <li v-for='(k,i) in sickData'  :key='i' :style='k.leave_type=="有薪病假"&& sickData.paidSickLeaveAmountShow?"padding-top:20px":""'>
              <p class="first">
                <span v-if='k.leave_type ==="全薪病假"&& sickData.fullPaidSickLeaveAmountShow'>{{k.leave_type}}</span> 
                <span v-if='k.leave_type ==="有薪病假"&& sickData.paidSickLeaveAmountShow'>{{k.leave_type}}</span> 
                <span v-if='k.leave_type ==="全薪病假" && k.end_dt && sickData.fullPaidSickLeaveAmountShow'>有效期{{k.end_dt}}</span> 
                <span style='float:right;color:#26a2ff;' v-if='k.leave_type ==="有薪病假"&& sickData.paidSickLeaveAmountShow'>剩余{{k.surplus}}天</span>
              </p>
              <p class="second" v-if='k.leave_type ==="全薪病假"&& sickData.fullPaidSickLeaveAmountShow'><span >共{{k.sum_days}}天</span> <span>已休{{k.rest_days}}天</span><span>剩余{{k.surplus}}天</span></p>
              <div class="range" v-if='k.leave_type ==="全薪病假"&& sickData.fullPaidSickLeaveAmountShow'>
                <span :style='"width:"+(100-(parseFloat(k.surplus)/parseFloat(k.sum_days))*100)+"%"'></span>
                <!-- <span v-else style='width:100%'></span> -->
              </div>
            </li>
          </ul>
        </div>
          
      </div>

      
    
    </section>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'element-ui'
Vue.use(Dialog)
export default {
	data () {
		return {
			dialogVisible: false,
			dialogMessage: '',
			active: 1,
			dialogTitle: '',
			show: true,

			res: '',

			sickData: [],

			yearData: [],

			startDataList: [],
			yearLeaveList: [],
			sickLeaveList: [],
			sickDetail: {
				comment: ''
			},

			yearDetail: {
				comment: ''
			},

			selectedMe: true,
			dataDeptList: [],

			myLeavePageNum: 1,
			deptLeavePageNum: 1,
			pageSize: 8,

			myleaveEnd: false,
			deptLeaveEnd: false
		}
	},
	mounted () {
		// this.getVacation()
		// this.getVacationDetail()


	},
	methods: {
		showHelp (type) {
			this.dialogTitle = type == 'year' ? '年假说明' : '病假说明'
			this.dialogVisible = true
			if (type == 'year') {
				this.dialogMessage = this.yearDetail.comment
			} else {
				this.dialogMessage = this.sickDetail.comment
			}
		},
		getVacation () {

			this.Axios.Post('/businessVacation/findYearVacationData').then((res) => {

				const { datas } = res.data

				let yearData = [], sickData = []

				// 去年
				yearData.push({
					end_dt: datas.lastFailureTime,
					sum_days: datas.lastTotalAmount,
					rest_days: datas.lastUsedAmount,  //已休
					surplus: datas.lastSurplusAmount,  //剩余
					leave_type: '年假', 
					years: datas.lastYear,
					visible:parseInt(datas.status) && parseInt(datas.lastTotalAmount || 0)
				})

				yearData.push({
					end_dt: datas.thisFailureTime,
					sum_days: datas.thisTotalAmount,
					rest_days: datas.thisUsedAmount,
					surplus: datas.thisSurplusAmount,
					leave_type: '年假',
					years: datas.thisYear,
					visible:parseInt(datas.thisTotalAmount || 0)
				})


				sickData.push({
					end_dt: datas.fullPaidSickLeaveAmountFailureTime,
					sum_days: datas.fullPaidSickLeaveAmountTotal,
					surplus: datas.fullPaidSickLeaveAmountSurplus,
					rest_days: datas.fullPaidSickLeaveAmountUsed,
          leave_type: '全薪病假',
          isShow:parseInt(datas.fullPaidSickLeaveAmountTotal || 0)
				})

				sickData.push({
					sum_days: parseFloat(datas.paidSickLeaveAmount) > 0 ? 1 : 0,
					surplus: datas.paidSickLeaveAmount,
          leave_type: '有薪病假',
          isShow:parseInt(datas.paidSickLeaveAmount || 0)
				})


				this.yearData = yearData

        this.sickData = sickData
        this.sickData.visible = 0
        if(1!=datas.userType){
          if(datas.paidSickLeaveAmountShow||datas.fullPaidSickLeaveAmountShow){
            this.sickData.visible = 1
            this.sickData.paidSickLeaveAmountShow = datas.paidSickLeaveAmountShow
            this.sickData.fullPaidSickLeaveAmountShow = datas.fullPaidSickLeaveAmountShow
          }
        }
			})




			// this.Axios.Post(this.URL.getValication.url).then(res => {
			// 	var datas = res.data.datas
			// 	let yearData = []
			// 	let sickData = []

			// 	yearData.push({
			// 		end_dt: datas.endDateAgo,
			// 		sum_days: datas.sunDaysAgo,
			// 		rest_days: datas.surplusAgo,
			// 		leave_type: '年假',
			// 		years: datas.QN
			// 	})

			// 	yearData.push({
			// 		end_dt: datas.endDate,
			// 		sum_days: datas.sunDays,
			// 		rest_days: datas.surplus,
			// 		leave_type: '年假',
			// 		years: datas.JN
			// 	})

			// 	this.yearData = yearData

			// 	sickData.push({
			// 		end_dt: datas.qxendDate,
			// 		sum_days: datas.qxDays,
			// 		rest_days: datas.surplusQX,
			// 		leave_type: '全薪病假'
			// 	})

			// 	sickData.push({
			// 		end_dt: '',
			// 		sum_days: '',
			// 		rest_days: datas.surplusYX,
			// 		leave_type: '有薪病假'
			// 	})

			// 	let visible = datas.leaveQX && datas.leaveYX ? true : false

			// 	sickData.visible = visible

			// 	this.sickData = sickData`
			// })
		},
		getVacationDetail () {

			this.Axios.Post('/leaveType/findList').then(res => {

				const { datas } = res.data

				datas.forEach((ele, i) => {
					if (ele.name === '年假') {
						this.yearDetail.comment = ele.content
					}

					if (ele.name === '病假') {
						this.sickDetail.comment = ele.content
					}
				})
			})
		}
	}
}
</script>

<style scoped lang='less'>
.leave-vacation {
  background-color: #fff;
  overflow: hidden;
  padding: 15px;
  margin-top: 1%;
  & > div {
    float: left;
    width: 50%;
    background-color: #fff;
    padding: 20px 0 10px 9%;
    letter-spacing: 1px;
    .img {
      float: left;
      width: 100%;
      img {
        width: 70px;
        height: 70px;
        float: left;
        display: inline-block;
      }
      ul {
        margin-left: 10px;
        float: left;
        li {
          line-height: 35px;
          height: 35px;
          padding-bottom: 0px;
          h1 {
            font-size: 16px;
          }
        }
      }
    }

    a.check {
      color: #26a2ff;
      cursor: pointer;
      font-size: 14px;
      font-weight: normal;
    }

    .first {
      padding: 10px 0 15px 0;
      span:first-of-type {
        font-size: 16px;
        color: rgb(0, 0, 0);
      }

      span:last-of-type {
        margin-right: 3%;
        color: #d22b27;
      }
    }

    .second {
      overflow: hidden;
      clear: both;
      span {
        font-size: 13px;
      }
      span:nth-of-type(1) {
        float: left;
        margin-right: 3%;
      }

      span:nth-of-type(2) {
        float: left;
      }
      span:nth-of-type(3) {
        float: right;
        margin-right: 3%;
        color: #26a2ff;
      }
    }

    li {
      padding-bottom: 15px;
    }
  }

  .year,
  .sick {
    overflow: hidden;
    padding-bottom: 15px;
    .year-detail,
    .sick-detail {
      float: left;
      width: 100%;
      & > h2 {
        font-size: 16px;
      }
      .range {
        height: 8px;

        width: 96%;

        margin-top: 6px;

        border-radius: 5px;

        position: relative;

        background-color: #26a2ff;

        span {
          background-color: #ccccff;

          height: 8px;

          width: 70%;

          border-radius: 5px;

          position: absolute;

          left: 0;

          top: 0;

          &::before {
            content: '';

            position: absolute;

            right: -8px;

            top: 50%;

            background-color: #fff;

            width: 10px;

            height: 10px;

            margin-top: -6px;

            border: 1px solid #26a2ff;

            border-radius: 50%;
          }
        }
      }
    }
  }
}

.leave-vacation-single {
  & > div:first-of-type {
    float: none;
    width: 80%;
    margin: 0 auto;
  }
}
</style>
